<template>
  <div>
    <a-tabs v-model:activeKey="active" class="custom-tabs">
      <a-tab-pane key="1" tab="制造工具">
        <Create />
      </a-tab-pane>
      <a-tab-pane key="2" tab="基础材料价格">
        <MarketPrice />
      </a-tab-pane>
      <a-tab-pane key="3" tab="远程武器价格">
        <YuanchengPrice />
      </a-tab-pane>
      <a-tab-pane key="4" tab="近战武器价格">
        <JinzhanPrice />
      </a-tab-pane>
      <a-tab-pane key="5" tab="经验之书">
        <Book />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Create from "./components/Create.vue";
import MarketPrice from "./components/MarketPrice.vue";
import YuanchengPrice from "./components/YuanchengPrice.vue";
import JinzhanPrice from "./components/JinzhanPrice.vue";
import Book from "./components/Book.vue";

export default defineComponent({
  components: {
    Create,
    MarketPrice,
    YuanchengPrice,
    JinzhanPrice,
    Book
  },
  data() {
    return {
      active: '1',  // 注意这里改为字符串类型，因为a-tabs的key是字符串
    };
  }
});
</script>

<style scoped>
.custom-tabs {
  width: 800px;
  margin: 20px auto;
}

:deep(.ant-tabs-nav) {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 800px;
  /* padding-top: 20px; */
  background: #fff;
}

:deep(.ant-tabs-content-holder) {
  margin-top: 40px;
}
</style>
